<template>
    <div class="my-shop-container">
        <h1>购物车列表</h1>

        <ul class="shop-header">
            <li>商品名称</li>
            <li>商品价格</li>
            <li>数量</li>
            <li>删除</li>
        </ul>


        <ul class="shop-list">
            <li
                v-for="(item, index) in $store.state.shopCarList"
                :key="index">
                <span>{{item.goodsName}}</span>
                <span>{{item.goodsPrice}}</span>
                <span>
                    <button @click="deleteCount(item)">-</button>
                    {{item.count}}
                    <button @click="addCount(item)">+</button></span>
                <button @click="deleteShop(item)" size="mini">删除</button>
            </li>
        </ul>

        <h3>{{total}}</h3>
        <!-- {{$store.state.shopCarList}} -->
    </div>
</template>

<script>
// let arr = [
//     {id: 1, count: 1, price: 10},
//     {id: 2, count: 2, price: 12},
//     {id: 3, count: 3, price: 14}
// ]


// let index = arr.findIndex(item => {
//     return item.id === 3
// })


// console.log(arr[index])
// 0 ---- 0 + 10
// 10 ---- 10 + 24
// 34 --- 34 + 42
// let total = arr.reduce((prev, next) => {
//     console.log(prev)
//     console.log(next)
//     return prev + (next.count * next.price)
// }, 0)

    export default {
        data () {
            return {}
        },
        methods: {
            // 增加数量
            addCount (item) {
                this.$store.commit('addCount', item.id)
            },
            // 减数量
            deleteCount (item) {
                this.$store.commit('deleteCount', item.id)
            },
            deleteShop (item) {
                this.$store.commit('deleteShop', item.id)
            },
        },
        computed: {
            total () {
                return this.$store.state.shopCarList.reduce((prev, next) => {
                    return prev + (next.count * Number(next.goodsPrice))
                }, 0)
            }
        }
    }
</script>


<style scoped lang="scss">
h1 {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.my-shop-container {
    flex: 1;
    height: 100%;
    border-right: 2px solid #e4393c;

    
.shop-header {

    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;

    li {
            flex: 1;
            text-align: center;
            line-height: 30px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
    }

    .shop-list {
        li {
            display: flex;
            justify-content: space-between;

            span {
                flex: 1;
                text-align: center;
                line-height: 25px;
            }

            .el-button {
                flex: 1;
            }
        }
    }
}
</style>